import React, { useEffect, useState } from 'react'
import { useNavigate } from "react-router-dom"
import { NavBar, Tabs, PullRefresh, Toast } from 'react-vant';
import "./myscss/Hpage2.scss"
import axios from "axios"
axios.defaults.baseURL = "http://localhost:3000"
export default function HPage1() {
    const navigate = useNavigate()
    let [allporpel, setAllporpel] = useState([])

    let [sval, setSval] = useState("")

    let getallporpel = async () => {
        let { data: { data } } = await axios.get("/getGhyy")
        data=data.filter(item=>item.isflag===0)
        function filterData(data) {
            if (sval === "男") {
                return data.filter(item => item.sex === "男");
            } else if (sval === "女") {
                return data.filter(item => item.sex === "女");
            } else {
                return data.filter(item => item.name.includes(sval));
            }
        }
        const filteredData = filterData(data);
        setAllporpel(filteredData)
    }
    useEffect(() => {
        getallporpel()
    }, [sval])
    return (
        <div id='HPage2'>
            <div className='top1'>
                <NavBar
                    leftText="问诊患者"
                    onClickLeft={() => navigate('/Hzgl/HPage1')}
                />
            </div>
            <div className='top2'>
                <p className='top2logo'><svg t="1725453526468" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4524" width="28" height="28"><path d="M466.048 128a337.92 337.92 0 0 1 338.048 337.664 336.128 336.128 0 0 1-79.552 217.6c0.64 0.256 1.28 0.64 1.92 1.088l4.8 3.84 152.896 143.104a37.376 37.376 0 0 1-46.464 58.368l-4.8-3.84-152.832-143.04a37.376 37.376 0 0 1-7.552-9.792c-56.96 44.16-128.64 70.4-206.464 70.4A337.92 337.92 0 0 1 128 465.664 337.92 337.92 0 0 1 466.048 128z m0 74.88a262.976 262.976 0 0 0-263.104 262.784 262.976 262.976 0 0 0 263.104 262.848 262.976 262.976 0 0 0 263.104-262.848A262.976 262.976 0 0 0 466.048 202.88z" fill="#515151" p-id="4525"></path></svg></p>
                <input type="text" value={sval} onChange={(e) => { setSval(e.target.value) }} placeholder="搜索患者" />
            </div>
            <div className='mbox'>
                <p>患者列表---{allporpel.length}人</p>
            </div>
            {allporpel.map(item => (
                <div className='box' key={item._id}>
                    <img src={"../" + item.img} alt="" />
                    <p className='txt1'>{item.name} <span>{item.sex}</span> <span>{item.age}岁</span></p>
                    <p className='txt2'>是否复诊 {item.status ? "是" : "否"}</p>
                </div>
            ))}
        </div>
    )
}
